<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div class="container">
		<h3>按钮式可折叠组件</h3>
		<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">按钮式可折叠组件</button>
		<div id="demo" class="collapse in" style="border: solid 1px black;">
			Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
		</div>
		<br />
		<br />
		<br />
		<h3>链接式可折叠组件</h3>
		<div id="myPanelGroup" class="panel-group">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title"><a data-toggle="collapse" data-parent="#myPanelGroup" href="#collapseOne">面板1</a></h3>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in">
					<div class="panel-body">
						第1个面板
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title"><a data-toggle="collapse" data-parent="#myPanelGroup" href="#collapseTwo">面板2</a></h3>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse">
					<div class="panel-body">
						第2个面板
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title"><a data-toggle="collapse" data-parent="#myPanelGroup" href="#collapseThree">面板3</a></h3>
				</div>
				<div id="collapseThree" class="panel-collapse collapse">
					<div class="panel-body">
						第3个面板
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	//当这段脚本注释后，折叠栏则最多只能显示一栏内容
	$(function() {
		$('#collapseOne').collapse('show')
	});
	$(function() {
		$('#collapseTwo').collapse({
			toggle: false
		})
	});
	$(function() {
		$('#collapseThree').collapse('toggle')
	});
	事件
	$('#collapseThree').on("shown.bs.collapse", function() {
		console.log("shown");
	});
</script>
</html>